<template>
  <div :class="[customClass]" class="noTabBar-page">
    <CommonNavigateBar v-bind="navigateBarProps" />
    <div class="noTabBar-page__wrapped">
      <div class="noTabBar-page__content">
        <CommonScroll v-bind="scrollProps">
          <slot></slot>
        </CommonScroll>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import CommonNavigateBar, {
  CommonNavigateBarProps,
} from "@/components/common-navigateBar/index.vue";
import CommonScroll, {
  CommonScrollProps,
} from "@/components/common-scroll/index.vue";
defineOptions({
  name: "noTabBar-page",
});

export type NoTabBarPageProps = {
  navigateBarProps?: Partial<CommonNavigateBarProps>;
  scrollProps?: Partial<CommonScrollProps>;
  customClass?: string;
};

withDefaults(defineProps<Partial<NoTabBarPageProps>>(), {});
</script>

<style lang="less">
page {
  height: 100%;
}

.noTabBar-page {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  &__wrapped {
    width: 100%;
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  &__content {
    width: 100%;
    height: calc(100% - env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>
